import { Component } from 'react'
import { Link } from 'react-router-dom'
// import ReactQuill from 'react-quill'
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Select,
  Upload,
  Space,
  message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'

import { http } from '../../utils'

// import 'react-quill/dist/quill.snow.css'
import './index.scss'

const { Option } = Select

class ArticlePublish extends Component {
  

  render() {

    return (
      <div>
        <Card
          title={
            <Breadcrumb separator=">">
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                修改文章
                {/* 发布文章 */}
              </Breadcrumb.Item>
            </Breadcrumb>
          }
        >

          {/* span 表示占用了 4 格，一共 24 格 */}
          <Form labelCol={{ span: 4 }} initialValues={{ type: 1, content: '' }}>
            {/* <Form.Item hidden name="id">
              <Input type="hidden" />
            </Form.Item> */}
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: '请输入文章标题' }]}
            >
              <Input placeholder="请输入文章标题" style={{ width: 400 }} />
            </Form.Item>
            <Form.Item
              label="频道"
              name="channel_id"
              rules={[{ required: true, message: '请选择文章频道' }]}
            >
              <Select placeholder="请选择文章频道" style={{ width: 200 }}>
                
              </Select>
            </Form.Item>

            <Form.Item label="封面">
              <Form.Item name="type">
                <Radio.Group>
                  <Radio value={1}>单图</Radio>
                  <Radio value={3}>三图</Radio>
                  <Radio value={0}>无图</Radio>
                  <Radio value={-1}>自动</Radio>
                </Radio.Group>
              </Form.Item>

              <Upload
                name="image"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList
                action="http://geek.itheima.net/v1_0/upload"
              >
                <div style={{ marginTop: 8 }}>
                  <PlusOutlined />
                </div>
              </Upload>
            </Form.Item>
            <Form.Item
              label="内容"
              name="content"
              rules={[{ required: true, message: '请输入文章内容' }]}
            >
              {/* <ReactQuill
                className="publish-quill"
                theme="snow"
                placeholder="请输入文章内容"
              /> */}
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button size="large" type="primary" htmlType="submit">
                  修改文章
                  {/* 发布文章 */}
                </Button>
                <Button size="large">存入草稿</Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}

export default ArticlePublish